<template>
  <div class="ryxx">
    <div class="switch" v-if="userId.length > 1">
      <div
        class="switch-s"
        @click="!isHideS && clickSwitch(false)"
        :style="{ color: isHideS ? '#8f9298' : '#3c93f0' }"
      >
        上一个
      </div>
      <div
        class="switch-e"
        @click="!isHideE && clickSwitch(true)"
        :style="{ color: isHideE ? '#8f9298' : '#3c93f0' }"
      >
        下一个
      </div>
    </div>
    <div class="casket-conter">
      <div class="casket">
        <el-image
          style="width: 100px; height: 160px"
          :src="bs64.head"
          fit="fill"
        ></el-image>
      </div>
      <div class="casket">
        <div class="ryhead">{{ bs64.name }}</div>
        <div class="casketinfo">
          <div class="ryinfo">手机号：{{ bs64.phone }}</div>
          <div class="ryinfo">性别：{{ bs64.sex }}</div>
          <div class="ryinfo">地址：{{ bs64.address }}</div>
          <div class="ryinfo">民族：{{ bs64.nation }}</div>
          <div class="ryinfo">身份证：{{ bs64.id_number }}</div>
          <div class="ryinfo">
            文化程度：{{ cultureLevelType[bs64.culture_level_type] }}
          </div>
          <div class="ryinfo">
            政治面貌：{{ politicsType[bs64.politics_type] }}
          </div>
          <div class="ryinfo">当前工种：{{ workType[bs64.work_type] }}</div>
          <div class="ryinfo">所在班组：{{ bs64.team }}</div>
          <div class="ryinfo">
            是否圩组长：{{ bs64.is_leader == 1 ? "是" : "否" }}
          </div>
          <div class="ryinfo">今日入场时间：{{ bs64.in_date }}</div>
          <div class="ryinfo">今日出场时间：{{ bs64.out_date }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "App",
  data() {
    return {
      id: "",
      userId: [],
      current: null,
      currentS: null,
      isHideS: false,
      isHideE: false,
      bs64: "",
      cultureLevelType: {
        "01": "小学",
        "02": "初中",
        "03": "高中",
        "04": "中专",
        "05": "大专",
        "06": "本科",
        "07": "硕士",
        "08": "博士",
        99: "其它",
      },
      politicsType: {
        "01": "中共党员",
        "02": "中共预备党员",
        "03": "共青团员",
        "04": "民革党员",
        "05": "民盟盟员",
        "06": "民建会员",
        "07": "民进会员",
        "08": "农工党党员",
        "09": "致公党党员",
        10: "九三学社社员",
        11: "台盟盟员",
        12: "无党派人士",
        13: "群众",
      },
      workType: {
        "010": "砌筑工",
        "020": "钢筋工",
        "030": "架子工",
        "040": "混凝土工",
        "050": "模板工",
        "060": "机械设备安装工",
        "070": "通风工",
        "080": "安装起重工",
        "090": "安装钳工",
        100: "电气设备安装调试工",
        110: "管道工",
        120: "变电安装工",
        130: "建筑电工",
        140: "司泵工",
        150: "挖掘铲运和桩工机械司机",
        160: "桩机操作工",
        170: "起重信号工",
        180: "建筑起重机械安装拆卸工",
        190: "装饰装修工",
        200: "室内成套设施安装工",
        210: "建筑门窗幕墙安装工",
        220: "幕墙制作工",
        230: "防水工",
        240: "木工",
        250: "石工",
        270: "电焊工",
        280: "爆破工",
        290: "除尘工",
        300: "测量放线工",
        310: "线路架设工",
        320: "古建筑传统石工",
        330: "古建筑传统瓦工",
        340: "古建筑传统彩画工",
        350: "古建筑传统木工",
        360: "古建筑传统油工",
        380: "金属工",
        900: "管理人员",
        1000: "其它",
        390: "杂工",
        1001: "总监理工程师",
        1002: "副总监理工程师",
        1003: "安全监理工程师",
        1004: "专业监理工程师",
        1005: "监理工程师",
        1006: "监理员",
        1007: "监理安全员",
        1008: "项目总工程师",
        1009: "项目经理",
        1010: "工程经理",
        1011: "项目技术负责人",
        1012: "项目工程师",
        1013: "项目管理员",
        1014: "项目副经理",
        1015: "项目总监",
        1016: "施工员",
        1017: "质量员",
        1018: "安全员",
        1019: "标准员",
        1020: "材料员",
        1021: "机械员",
        1022: "劳务员",
        1023: "资料员",
        1024: "总监理工程师代表",
        1025: "测量员",
        1026: "试验员",
        1027: "造价员",
        1028: "质量负责人",
        1029: "安全负责人",
        1030: "技术负责人",
        1031: "生产经理",
        1032: "物资材料工程师",
        1099: "其它",
      },
    };
  },
  methods: {
    clickSwitch(e) {
      if (e) {
        this.currentS++;
      } else {
        this.currentS--;
      }
      this.$emit("click", { id: this.userId[this.currentS] });
      this.determineFn(this.currentS)
    },
    determineFn(e){
        if (e == 0) {
          this.isHideS = true;
        } else if (this.userId.length == e + 1) {
          this.isHideE = true;
        } else {
          this.isHideS = false;
          this.isHideE = false;
        }
    }
  },
  watch: {
    current: {
      handler(val) {
        this.currentS = val;
        this.determineFn(this.currentS)
        this.$emit("click", {
          id: this.userId[this.currentS],
        });
      },
      deep: true,
      immediate: true,
    },
    dataChart: {
      handler(val) {
        let data = val.data;
        for (let i = 0; i < 5; i++) {
          data = window.atob(data);
        }
        this.bs64 = JSON.parse(data);
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
  
  <style scoped>
.ryxx {
  width: 950px;
  height: 289px;
  position: relative;
}
.switch {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
  font-size: 16px;
  justify-content: end;
  align-items: center;
  box-sizing: border-box;
}
.switch-e {
  margin-left: 20px;
}
.casket-conter {
  display: flex;
  height: 250px;
  overflow: auto;
}
.casket:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16%;
}
.casket:nth-child(2) {
  color: #fff;
  width: 84%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ryhead {
  height: 30px;
  color: #f29e03;
  font-size: 20px;
  font-weight: bold;
}
.casketinfo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.casketinfo .ryinfo {
  width: 49%;
  line-height: 30px;
}
</style>
  